<template>
	<view class="content">
		<uni-nav-bar :statusBar="true" dark fixed title="新建比赛" left-icon="left" @clickLeft="clickLeft">
			<block slot="right">
				<view class="city">
					<view @click="onCreated">
						创建
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<view>

			<uni-list class="list">
				<uni-list-item clickable @click="selectList('one')" title="主队"  :right-text="teamOneIdName"/>
				<uni-list-item title="客队" clickable  @click="selectList('two')" :right-text="teamTwoIdName"/>
			</uni-list>
			<view class="line"></view>
			<uni-list class="list" :border="false">
				<uni-list-item clickable  title="时间选择">
					<template v-slot:footer>
						<uni-datetime-picker ref="date" type="datetime" v-model="formData.tournamentBeginTime"
							@change="changeLog" >
							<text class="text-time">{{formData.tournamentBeginTime ||text}}</text>
						</uni-datetime-picker>
					</template>
				</uni-list-item>
				<uni-list-item title="阶段" rightText="小组赛"  class="otherList">
					<template v-slot:footer>
						<uni-data-select
								placeholder="请选择阶段"
						        collection="opendb-app-list"
								:localdata="range"
						        field="appid as value, name as text"
								v-model="formData.type"
						      />
					</template>
					
				</uni-list-item>
				<uni-list-item class="otherList"  title="场地" rightText="场地">
					<template v-slot:footer>
						<uni-easyinput  v-model="formData.address" focus placeholder="请输场地" @input="input"></uni-easyinput>
					</template>
				</uni-list-item>
			</uni-list>
			
		</view>
	</view>
</template>

<script>
	import {postTournament} from '@/api/tournament/index.js';
	import { Debounce } from "@/utils/common.js";
	export default {
		data() {
			return {
				formData: {
					teamOneId: '',
					tournamentBeginTime: '',
					type: 1,
					seasonId: '',
					contestId:'',
					tournamentName: '1',
					address: ''
				},
				text: '请选择时间',
				teamOneIdName: '',
				teamTwoIdName: '',
				range: [
					{ value: 1, text: "小组赛"},
					{ value: 2, text: "淘汰赛"},
					{ value: 3, text: "四强赛"},
					{ value: 4, text: "半决赛"},
					{ value: 5, text: "决赛"},
					{ value: 6, text: "季军赛"},
					{ value: 7, text: "排位赛"},
					{ value: 8, text: "常规赛"},
					{ value: 9, text: "季后赛"},
				],
				id:'',
				isClick: true,
			}
		},
		onLoad({id}) {
			let contestId = uni.getStorageSync('contestId');
			this.formData.seasonId = Number(id)
			this.formData.contestId = contestId
		},
		methods: {
			changeLog(val) {
				console.log(val);
			},
			onSelectTime(type) {
				console.log(this.$refs.date.show())
			},
			clickLeft() {
				uni.navigateBack()
			},
			selectList(type) {
				uni.navigateTo({
					url: '/pages/competition/selected?type=' + type
				})
			},
			selectplace() {
				uni.navigateTo({
					url: '/pages/competition/place'
				})
			},
			maskClick(val) {
				console.log(val)
			},
			onCreated() {
				console.log(222222)
				if (!this.isClick) return;
				this.isClick = false
				if (!this.teamOneIdName) {
					this.$modal.msg("请选择主队")
					return;
				}
				if (!this.teamTwoIdName) {
					this.$modal.msg("请选择客队")
					return;
				}
				if (!this.formData.tournamentBeginTime) {
					this.$modal.msg("请选时间阶段")
					return;
				}
				if (!this.formData.teamOneId) {
					this.$modal.msg("请选择主队")
					return;
				}
				if (!this.formData.address) {
					this.$modal.msg("请输入场地")
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				postTournament(this.formData).then(res => {
					uni.hideLoading()
					this.$modal.msg(res.msg)
					setTimeout(() => {
						this.isClick = true;
						uni.navigateBack()
					}, 600)
				}).catch(err => {
					uni.hideLoading()
				})
			}
		},
		onShow() {
			// 获取球队信息
			let obj = uni.getStorageSync('onebasketballTeam');
			this.formData.teamOneId = obj['id'];
			this.teamOneIdName = obj['teamName'];
			
			let obj1 = uni.getStorageSync('twobasketballTeam');
			this.formData.teamTwoId = obj1['id']
			this.teamTwoIdName = obj1['teamName']
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F7FBFC;
	}
	.otherList {
		::v-deep.uni-list-item__container {
			overflow: inherit;
			align-items: center;
		}
		
	}

	.text-time {
		display: flex;
		width: 100%;
		justify-content: right;
		color: #999;
		font-size: 12px;
	}

	.content {

		.list {
			padding: 0 30rpx;
		}

		.line {
			height: 6px;
			background-color: #F7FBFC;
		}
	}
</style>